<template>
	<view>
		<cu-custom bgColor="bg-maincolor" :isBack="true">
			<block slot="content">
				签到记录
			</block>
		</cu-custom>
		
		
		<view class="one_box flex">
			<image class="iamg_box" ></image>
			<view class="center_box">
				<view class="name_box">刘小丽</view>
				<view class="school_box">赣州唯宅汇有限公司</view>
			</view>
			<view class="select_calendar">
				<view class="flex">
					<text class="tub cuIcon-calendar" style="color: #3b73f6;"></text>
					<view>
						<picker class="riqi" fields="month" mode="date" :value="date" :start="startDate" :end="endDate"  @change="bindDateChange">
							<view>{{date}}<text class="cuIcon-unfold"></text></view>
						</picker>
					</view>
					
				</view>
			</view>
		</view>
		
		
		<view class="two_box">
			<view class="date_box">09月25日</view>
			<view class="card">
				<view class="time">09:00  <text style="margin-left: 40rpx;">上班打卡</text></view>
				<view class="address">签到地点: 赣州市章贡区长征大道天际华庭</view>
			</view>
		</view>
		<view class="two_box">
			<view class="date_box">09月24日</view>
			<view class="card">
				<view class="time">08:50  <text style="margin-left: 40rpx;">上班打卡</text></view>
				<view class="address">签到地点: 赣州市章贡区长征大道天际华庭</view>
			</view>
			<view class="card">
				<view class="time">18:02  <text style="margin-left: 40rpx;">下班打卡</text></view>
				<view class="address">签到地点: 赣州市章贡区长征大道天际华庭</view>
			</view>
		</view>
		
		
		<view class="two_box">
			<view class="date_box">09月23日</view>
			<view class="card">
				<view class="time">08:56  <text style="margin-left: 40rpx;">上班打卡</text></view>
				<view class="address">签到地点: 赣州市章贡区长征大道天际华庭</view>
			</view>
			<view class="card">
				<view class="time">18:10  <text style="margin-left: 40rpx;">下班打卡</text></view>
				<view class="address">签到地点: 赣州市章贡区长征大道天际华庭</view>
			</view>
		</view>
		
		
	</view>
</template>

<script>
	export default {
		data() {
			const currentDate = this.getDate({
				format: true
			})
			return {
				title: 'picker',
				index: 0,
				date: currentDate,
			}
		},
		computed: {
			startDate() {
				return this.getDate('start');
			},
			endDate() {
				return this.getDate('end');
			}
		},
		methods: {
			bindDateChange: function(e) {
				console.log(e.target.value.replace("-","."))
				this.date = e.target.value.replace("-",".")
			},
			getDate(type) {
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
		
				if (type === 'start') {
					year = year - 60;
				} else if (type === 'end') {
					year = year + 2;
				}
				month = month > 9 ? month : '0' + month;
				return `${year}.${month}`;
			}
		}
	}
</script>

<style>
	.one_box{
		height: 175rpx;
		background-color: #FFFFFF;
		padding-top: 28rpx;
		padding-left: 31rpx;		
	}
	
	.iamg_box{
		width: 114rpx;
		height: 114rpx;
		border-radius: 180rpx;
	}
	
	.center_box{
		margin-left: 26rpx;
		margin-top: 18rpx;
	}
	
	.name_box{
		color: #000000;
		font-size: 30rpx;
		margin-bottom: 19rpx;
	}
	
	.school_box{
		color: #999999;
		font-size: 23rpx;
	}
	
	.select_calendar{
		width: 232rpx;
		height: 56rpx;
		border-radius: 90rpx;
		background-color: #F9F9F9;
		line-height: 56rpx;
		text-align: center;
		position: absolute;
		right: 30rpx;
		margin-top: 8rpx;
		font-size: 28rpx;
	}
	
	.two_box{
		margin-top: 9rpx;
		background-color: #FFFFFF;
		padding-top: 27rpx;
		padding-bottom: 38rpx;
		padding-left: 30rpx;
	}
	
	.date_box{
		font-size: 22rpx;
		color: #666666;
	}
	
	
	.card{
		width: 690rpx;
		height: 143rpx;
		background-color: #f9f9f9;
		margin-top: 17rpx;
		border-radius: 15rpx;
		padding-top: 37rpx;
		padding-left: 27rpx;
	}
	
	.address{
		font-size: 24rpx;
		color: #999999;
	}
	
	.time{
		font-size: 27rpx;
		color: #333333;
		margin-bottom: 20rpx
	}
	.riqi{
		font-size: 26rpx;
		color: rgb(153,153,153);
		padding-left: 10rpx;
		padding-right: 10rpx;
	}
	.tub{
		font-size: 42rpx;
	}
	.flex{
		margin-left: 24rpx;
	}
</style>
